<template>
  <page-view class="main">
    <router-view v-slot="{ Component }">
      <transition :name="animation">
        <keep-alive include="Menu" exclude="ActionSheet">
          <component :is="Component"></component>
        </keep-alive>
      </transition>
    </router-view>

    <div class="footer">
      <router-link to="/main/menu" class="nav-i">
        <div class="iconfont icon">&#xe63c;</div>
        <h3>点餐</h3>
      </router-link>
      <router-link to="/main/order" class="nav-i">
        <div class="iconfont icon">&#xe619;</div>
        <h3>订单</h3>
      </router-link>
      <router-link to="/main/category" class="nav-i">
        <div class="iconfont icon">&#xe601;</div>
        <h3>分类</h3>
      </router-link>
      <router-link to="/main/user" class="nav-i">
        <div class="iconfont icon">&#xe614;</div>
        <h3>用户</h3>
      </router-link>
    </div>
  </page-view>
</template>

<script>
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
export default {
  name: "Main",
  setup(props, context) {
    const route = useRoute();
    const animation = ref("slide");
    let routeIndex = route.meta.index;
    watch(route, () => {
      animation.value =
        route.meta.index < routeIndex ? "slide-right" : "slide-left";
      routeIndex = route.meta.index;
    });

    return { animation };
  },
};
</script>

<style lang="scss" scoped>
.footer {
  position: fixed;
  bottom: 0;
  z-index: 999;
  width: 100vw;
  height: 60px;
  background-color: lightgray;
  border-top: 1px solid rgba(237, 110, 25, 0.436);
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  .nav-i {
    flex: 1;
    text-align: center;
    .icon {
      font-size: 20px;
      padding: 5px 0px;
    }
  }
}
.router-link-active {
  color: $primaryColor;
}
// 动画
// 向左
.slide-left-enter-from {
  transform: translateX(100%);
}
.slide-left-enter-to,
.slide-left-leave-from,
.slide-left-leave-to,
.slide-right-enter-to,
.slide-right-leave-from,
.slide-right-leave-to {
  transform: translateX(0);
}
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 200ms linear;
  position: fixed;
}
// 向右
.slide-right-enter-from {
  transform: translateX(-100%);
}
</style>